<template>
    <h1>Watch基本使用</h1>
    <p>当前值：{{ num }}</p>
    <P>
        <button @click="num++">点我+1</button>
    </P>

    <span>(响应式对象)当前数据为：{{ num2.value }}</span>
    <button @click="num2.value++">点我+1</button>


    <span> {{ date.car.cofing.address }}</span>
    <button @click="date.car.cofing.address = !date.car.cofing.address">修改数据</button>


</template>

<script setup lang="ts">
import { ref, watch,reactive } from 'vue';

//创建响应式数据
const num = ref(8);

//创建监听器 Watch(source, callback, options)
//1. source:代表需要监听的数据源 一个函数 返回一个值 一个ref 一个响应式对象
//2. callback: 代表回调函数 当数据发生改变的调用
//3. options: 代表可以在Watch中进行匹配的选项 如deep immediate flush 
watch(num, (newValue, oldValue) => {
    console.log('值变了，原来是：' + oldValue + '现在变成了：' + newValue)
},{immediate:true})


//创建响应式对象
const num2 = reactive({
    value:1
})
watch(num2,(newValue,oldvalue)=>{
    console.log('num2的值变了，原来是：' + oldvalue + '现在变成了：' + newValue)
})

//复杂式响应对象
const date = reactive({
    car:{
        name:"大萨达",
        money:9000,
        cofing:{
            color:"黑色",
            address:"海淀区"
        }
    }
})

watch (date,(newValue,oldValue)=>{
    console.log('新值为' + newValue + '旧值为' + oldValue);
},{deep:true})

</script>